<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .BMap_cpyCtrl {
            display: none;
        }

        .anchorBL {
            display: none;
        }

        /**
         * 列表组样式
         */
        #table-read-card {
            position: fixed;
            bottom: 0;
            width: 40%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .table {
            color: white;
        }

        th {
            text-align: center;
        }
    </style>
</head>
<body style="width:100%;height: 100%;margin: 0;">
<div id="main" style="width: 100%;height:100vh;">

</div>
<div id="table-read-card">
    <table class="table text-center">
        <thead>
        <tr>
            <th>刷卡人</th>
            <th>刷卡时间</th>
        </tr>
        </thead>

        <tbody>
        </tbody>
    </table>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/extension/bmap.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.19.0/moment-with-locales.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=zSrwwQpoWFZFa9Rk03iyzT2O"></script>

<script>
    //中山市地图轮廓信息
    var as = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "properties": {"name": "中山市"},
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [[[[113.587345, 22.5138430000001], [113.582908964844, 22.5570851875], [113.573624296875, 22.521977765625], [113.569637480469, 22.4759206367188], [113.573616972656, 22.4581716132813], [113.555513945313, 22.4456740546876], [113.547345, 22.413843], [113.491790800781, 22.4093971992187], [113.480477324219, 22.3952663398438], [113.493079863281, 22.3284352851563], [113.470553007813, 22.310395734375], [113.487323027344, 22.2818679023438], [113.51107546875, 22.2628469062501], [113.481790800781, 22.2393971992188], [113.472899199219, 22.2282888007813], [113.452093535156, 22.2116310859376], [113.407345, 22.203843], [113.3857825, 22.23507346875], [113.340513945313, 22.2520119453125], [113.313260527344, 22.3297585273438], [113.278533964844, 22.382309796875], [113.247345, 22.4038430000001], [113.241209746094, 22.4639943671875], [113.214534941406, 22.511801984375], [113.177345, 22.543843], [113.17123171875, 22.5927223945313], [113.157345, 22.603843], [113.148944121094, 22.6238430000001], [113.163543730469, 22.6586037421875], [113.157345, 22.683843], [113.192010527344, 22.6758107734376], [113.20170046875, 22.6994875312501], [113.231082792969, 22.7391164375], [113.246263457031, 22.74819846875], [113.262110625, 22.7276686835938], [113.28170046875, 22.73948753125], [113.32298953125, 22.74819846875], [113.350238066406, 22.7646364570313], [113.357345, 22.773843], [113.415872832031, 22.7405690742187], [113.44197390625, 22.73847190625], [113.447345, 22.733843], [113.532655058594, 22.6716579414063], [113.531803007813, 22.6501686835938], [113.552154570313, 22.6186525703125], [113.577345, 22.603843], [113.570909453125, 22.5881789375001], [113.614908476563, 22.5765700507813], [113.603170195313, 22.5180178046875], [113.587345, 22.5138430000001]]]]
            }
        }]
    }

    //引入新疆地区地图
    echarts.registerMap('新疆', as);
    var myChart = echarts.init(document.getElementById('main'));

    var latestReadCardTimeStamp = 0;//最后一次刷卡的时间

    //各镇区坐标
    var geoCoordMap = {
        '石岐区街道办事处': [113.395461, 22.5425],
        '东区街道办事处': [113.382518, 22.506297],
        '火炬开发区街道办事处': [113.489223, 22.572436],
        '西区街道办事处': [113.213274, 22.690175],
        '南区街道办事处': [113.420032, 22.439542],
        "五桂山": [113.417071, 22.52595],
        '小榄镇': [113.257806, 22.677377],
        '黄圃镇': [113.345798, 22.716774],
        '民众镇': [113.500096, 22.627524],
        '东升镇': [113.297991, 22.628979],
        '古镇镇': [113.197393, 22.619293],
        '坦洲镇': [113.474307, 22.260588],
        '港口镇': [113.39153, 22.591756],
        '三角镇': [113.424476, 22.682489],
        '横栏镇': [113.271203, 22.529531],
        '南头镇': [113.298283, 22.723521],
        '阜沙镇': [113.356417, 22.672922],
        '南朗镇': [113.537483, 22.504879],
        '三乡镇': [113.447976, 22.363792],
        '板芙镇': [113.32855, 22.422132],
        '大涌镇': [113.307187, 22.471243],
        '神湾镇': [113.370276, 22.308298],
    };

    //初始化百度地图图表实例，但是还没有数据
    (function initMapChart() {
        myChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: params => {
//                console.log(params)
                    return params.name + ": " + params.value[2] + '台'
                }
            },
            backgroundColor: '#4f5555',
            title: {
                text: '中山设备部署图',
//                subtext: '散点圆的大小随设备数量改变而改变',
                left: 'center',
                textStyle: {
                    color: '#7bbfea'
                }
            },
            geo: {
                map: '新疆',
                label: {
                    textStyle: {
                        fontSize: '.1rem',
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#fff',
                        borderColor: '#587A9F'
                    },
                    emphasis: {
                        areaColor: '#ccc'
                    }
                }
            },
            series: [{//波纹点
                name: '定位点',
                type: 'effectScatter', // 散点图
                coordinateSystem: 'geo', // 使用地理坐标系
                hoverAnimation: 'true',
//                legendHoverLink: 'false',
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 3
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: data => {
//                            console.log(data.name)
                            return data.name
                        }
                    }
                },
//            data: convertData(item[1]),//数据格式: {name:'',value:[x,y,val]}
                symbolSize: function (val) {
                    var val = val[2]

                    if (val > 0)
                        return 17

                    return 5
                },
                itemStyle: {
                    normal: {
                        color: '#5599E4',
                    }
                },
                zlevel: 1,
            }, {//就只是地图的显示而已
                tooltip: {
                    show: false,
                },
                type: 'map',
                map: '新疆',
                zlevel: 0,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#ddb926',
                            fontSize: 10
                        },
                    },
                    emphasis: {
                        textStyle: {
                            color: '#ddb926',
                            fontSize: 10
                        },
                    }

                },
//            data: data
            }, {//这个是红色表示点
                name: '点',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin',
                symbolSize: function (val) {
                    var val = val[2]
                    if (val > 200)
                        return 45

                    return 35
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 15,
                        }
                    }
                },
                itemStyle: {
                    normal: {
//                        color: '#F62157', //标志颜色
                        color: (data) => {
                            var data = data.data.value[2]
                            //console.log(data)
                            if (data > 0) {
                                return '#F62157'
                            }
                            return '#000'
                        }
                    }
                },
                zlevel: 6,
//            data: convertData(data2)//数据格式 {name:'',value:[x,y,val]}，只会取val出来显示
            }]
        })

//        var bmap = myChart.getModel().getComponent('bmap').getBMap();
//        bmap.addControl(new BMap.NavigationControl());
    }());

    //实时更新左下角刷卡表格数据
    (function updateReadCardTableData() {
        function reRequestLatest() {
            $.ajax({
                url: '/event/readCard/latest',
                method: 'POST',
                data: {
                    latestTime: latestReadCardTimeStamp
                }
            }).then(res => {
                var results = res.resultData.slice(0, 5)

                for (var i = results.length - 1; i >= 0; i--) {
                    var item = results[i]
                    $('#table-read-card tbody tr').last().remove()
                    $('#table-read-card tbody').prepend(
                        '<tr>' +
                        '<td>' + item.ownerName + '</td>' +
                        '<td>' + moment(item.time).format("YYYY-MM-DD HH:mm:ss") + '</td>' +
                        '</tr>'
                    )
                }


                //将第一个(最新的)刷卡数据时间保存到全局变量
                latestReadCardTimeStamp = results[0].time || latestReadCardTimeStamp

                //请求成功之后再触发请求
                setTimeout(reRequestLatest, 5000)
            })
        }

        $.ajax({
            url: '/event/readCard/recent',
            method: 'POST',
        }).then(res => {
            console.log(res)

            for (var i = 0; i < 5; i++) {
                var item = res.resultData[i]

                var name = item != null ? item.ownerName : "空"
                var time = item != null ? moment(item.time).format("YYYY-MM-DD HH:mm:ss") : ""
                console.log("name: "+name+" time: "+time)

                $('#table-read-card tbody').append(
                    '<tr>' +
                    '<td>' + name + '</td>' +
                    '<td>' + time + '</td>' +
                        '</tr>'
                )
            }

            //将第一个(最新的)刷卡数据时间保存到全局变量
            latestReadCardTimeStamp = res.resultData[0].time || latestReadCardTimeStamp

            //隔5秒后请求latest
            setTimeout(reRequestLatest, 5000)
        })

    }());

    //请求地图上终端数量并更新地图显示
    (function requestTerminalCountData() {
        $.ajax({
            url: '/terminal/countSubrange',
            data: {
                prefixId: '864420' //中山市
            }
        }).then(res => {

            var result = convertData(res)

            myChart.setOption({
                series: [
                    {data: result},
                    {},
                    {data: result}
                ]
            })

        }, err => {
            alert('服务器响应出错')
        })
    }());

    /**
     * 自定义辅助函数
     */

    var convertData = function (data) {
        var res = [];

        for (var param in data) {
            var geoCoord = geoCoordMap[param]
            if (geoCoord) {
                res.push({
                    name: param,
                    value: geoCoord.concat(data[param])
                })
            }
        }
        return res;
    };
</script>
</body>
</html>